import { formUI } from '@/comon/tools';
import { useEditorStore } from '@/store/editor';
import { formItem, label, required, rules, useForm } from '@/hooks/useForm';
import { Input } from 'antd';
import { FC, useEffect } from 'react';
import { ComponentPropsType } from '@/components/editor';

class Config {
  @label('标题')
  @formItem(<Input />)
  @rules([required('请输入标题')])
  title?: string;

  @label('Placeholder')
  @formItem(<Input />)
  placeholder?: string;
}

const FormInput: FC = () => {
  const { selectedComponentInfo, selectedId, updateSelected } =
    useEditorStore();

  const form = useForm({
    config: Config,
    onChange,
  });

  useEffect(() => {
    if (selectedComponentInfo?.props) {
      form.setFormData(selectedComponentInfo.props);
    }
  }, [selectedId]);

  function onChange(props: ComponentPropsType) {
    updateSelected({ props });
  }

  return formUI(form, selectedComponentInfo?.isLocked);
};

export default FormInput;
